import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
  headerLeftBackground,
  headerRightBackground,
  left,
  right,
  leafLeftBackground,
  leafRightBackground,
  fullScreenEnter,
  fullScreenExit,
  close,
} from '../Icons';
import styles from './index.module.less';

const Button = (props) => {
  const { className,style, background, icon, disable, onClick } = props;

  return (
    <div
      className={classnames(
        styles.root,
        className,
        disable ? styles.disable : null,
        background?.indexOf('leaf') > -1 ? styles.small : styles.big,
        background?.indexOf('headerLeft') > -1 ? styles.left : null,
        background?.indexOf('headerRight') > -1 ? styles.right : null,
      )}
      style={style}
      onClick={() => {
        if (!disable) {
          onClick();
        }
      }}
    >
      {background === 'headerLeftBackground' ? <div className={styles.background}>{headerLeftBackground}</div> : null}
      {background === 'headerRightBackground' ? <div className={styles.background}>{headerRightBackground}</div> : null}
      {background === 'leafLeftBackground' ? <div className={styles.background}>{leafLeftBackground}</div> : null}
      {background === 'leafRightBackground' ? <div className={styles.background}>{leafRightBackground}</div> : null}
      {/* 后续改得灵活一些 */}
      {icon === 'left' ? <div className={styles.icon}>{left}</div> : null}
      {icon === 'right' ? <div className={styles.icon}>{right}</div> : null}
      {icon === 'fullScreenEnter' ? <div className={styles.icon}>{fullScreenEnter}</div> : null}
      {icon === 'fullScreenExit' ? <div className={styles.icon}>{fullScreenExit}</div> : null}
      {icon === 'close' ? <div className={styles.icon}>{close}</div> : null}
    </div>
  );
};

Button.defaultProps = {
  className: null,
  style:null,
  background: null,
  icon: null,
  disable: false,
  onClick: () => {},
};

Button.propTypes = {
  className: PropTypes.any,
  style: PropTypes.any,
  background: PropTypes.any,
  icon: PropTypes.any,
  disable: PropTypes.bool,
  onClick: PropTypes.func,
};

export default Button;
